<template>
  <div class="profit-container">
    <van-field v-model="userId" type="number" label="用户ID" placeholder="请输入用户id" clearable />
    <van-field v-model="startTime" is-link readonly name="datePicker" label="开始时间" placeholder="点击开始时间"
      @click="onClickTime(0)" />
    <van-field v-model="endTime" is-link readonly name="datePicker" label="结束时间" placeholder="点击结束时间"
      @click="onClickTime(1)" />
    <van-button type="primary" block style="width: 90%; margin: 10px auto;" @click="search">搜索</van-button>
    <van-popup v-model:show="showPicker" position="bottom">
      <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" :model-value="minDate" />
    </van-popup>
    <!-- <van-grid column-num="3">
      <van-grid-item icon="balance-o">
        <template #text>
          <div>总充值</div>
          <div>{{data.total_recharge}}</div>
        </template>
</van-grid-item>
<van-grid-item icon="cash-back-record-o">
  <template #text>
          <div>总兑换价</div>
          <div>{{data.total_pay}}</div>
        </template>
</van-grid-item>
<van-grid-item icon="cash-o">
  <template #text>
          <div>总盈亏</div>
          <div>{{data.diff_amount}}</div>
        </template>
</van-grid-item>
</van-grid> -->
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          :finished="page * 10 >= total"
          finished-text="没有更多了"
          @load="onLoadMore"
      >
        <div class="profit-item" v-for="item in data.data" :key="item.id">
          <span>{{ item.id }}</span>
          <span>{{item.recharge_amount}}</span>
          <span>{{item.recovery_price}}</span>
          <span>{{profit(item)}}</span>
        </div>
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh> -->
    <el-table :data="data.data" style="width: 100%" row-key="date" border>
      <el-table-column fixed label="用户id" prop="id" width="70" align="center" />

      <el-table-column label="总充值" prop="recharge_amount" width="100" align="center"/>
      <el-table-column prop="give_balance" label="赠送总额" width="180" />
      <el-table-column prop="take_balance" label="发货总额" width="100" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top">
            <template #default>
              <div>待收货总额: {{ scope.row.dsh_take_balance }}</div>
              <div>待发货总额: {{ scope.row.dfh_take_balance }}</div>
            </template>
            <template #reference>
              <el-tag type="success" effect="dark">{{ scope.row.take_balance }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="recovery_price" label="余额" width="100" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top">
            <template #default>
              <div>赏袋总额: {{ scope.row.sd_balance }}</div>
              <div>账户余额: {{ scope.row.balance }}</div>
              <div>发货总额: {{ scope.row.take_balance }}</div>
              <div>未开宝箱总额: {{ scope.row.bx_wk_balance }}</div>
              <div>未开福袋总额: {{ scope.row.wk_fd_amount_end }}</div>
            </template>
            <template #reference>
              <el-tag type="info" effect="dark">{{ scope.row.recovery_price }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="zks_balance" label="总亏损" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.zks_balance > 0 ? 'primary' : 'danger'" disable-transitions>{{ scope.row.zks_balance
            }}</el-tag>
        </template></el-table-column>
      <el-table-column label="操作" fixed="right" >
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            余额记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="zongtotal" @change="paginationChage1" />
    <van-dialog v-model:show="BlanaceDetail" :title="userId + '余额记录'" show-cancel-button @confirm="celenlBlanace">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="jb_balance" label="金币余额" width="180" />
        <el-table-column prop="zs_balance" label="钻石余额" width="180" />
        <el-table-column prop="prize_total_balance" label="赏品总额" width="180" />
        <el-table-column prop="box_bag_balance" label="宝箱总额" width="180" />
        <!-- <el-table-column prop="give_balance" label="赠送总额" width="180" /> -->
        <el-table-column prop="take_order_balance" label="提货总额" width="180" />
        <el-table-column prop="prize_lock_balance" label="保险柜总额" width="180" />
        <el-table-column prop="total_balance" label="总余额" width="180" />
        <el-table-column prop="created_at" label="创建日期" width="180" />
      </el-table>
      <el-pagination :total="ztsNum" layout="prev, pager, next" :page-size="10" @change="paginationChage" />
    </van-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from 'vue'
import { reqGetProfitLossData } from "@/api/profit/index.js";
import {
  requserBalances
} from '@/api/user/index.js'

const date = new Date()
const minDate = [date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate()]

const userId = ref('')
const startTime = ref('')
const endTime = ref('')
const ztsNum = ref('')
const zongtotal = ref()
const showPicker = ref(false)
const refreshing = ref(false)
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const data = ref([])
let currentNum = 0
const tableData = ref([])
const BlanaceDetail = ref(false)
const djyPage = ref(1)


const onConfirm = ({ selectedValues }) => {
  const value = selectedValues.join('-')
  if (currentNum === 0) {
    startTime.value = value
  } else {
    endTime.value = value
  }
  showPicker.value = false
}

const onClickTime = (num) => {
  currentNum = num
  showPicker.value = true
}
const paginationChage1 = (item) => {
  page.value = item
  getData()
}
const paginationChage = (item) => {
  djyPage.value = item
  reqye()
}

onMounted(() => {
  refreshing.value = true
  getData()
})

const getData = async () => {
  try {
    const result = await reqGetProfitLossData({
      page: page.value,
      limit: 10,
      id: userId.value,
      startTime: startTime.value,
      endTime: endTime.value
    })

    if (result.code === 200) {
      data.value = result.data
      zongtotal.value = result.data.total
    }
  } catch (e) {
    console.log(e);
  } finally {
    loading.value = false
    refreshing.value = false
  }

}

// const onLoadMore = () => {
//   getData()
// }

// const onRefresh = () => {
//   page.value = 1
//   total.value = 0
//   getData()
// }

const reqye = async () => {
  const result = await requserBalances({
    user_id: userId.value,
    page: djyPage.value
  })

  if (result.code === 200) {
    tableData.value = result.data.data
    ztsNum.value = result.data.total
    BlanaceDetail.value = true
  }
}
const search = () => {
  // data.value.data = []
  getData()
}
const handleDelete = async (item) => {
  userId.value = item.id
  reqye()
}
const profit = computed(() => {
  return (item) => {
    const amount = item.recovery_price - item.recharge_amount
    return amount >= 0 ? '+' + amount : amount
  }
})
</script>



<style scoped lang="less">
/deep/.van-dialog {
  width: 98% !important;
}

.profit-item {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
